<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<style>
    #toolbar {
        background: rgba(42, 42, 42, 0.8);
        padding: 4px;
        border-radius: 4px;
    }
</style>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar">
    <table><tbody>
    <tr>
        <td><button class="cesium-button" data-bind="click: highlightTrees">Highlight trees</button></td>
    </tr>
    <tr>
        <td><button class="cesium-button" data-bind="click: highlightBuilding">Highlight building face</button></td>
    </tr>
    <tr>
        <td>invert classification</td>
        <td><input type="checkbox" data-bind="checked: inverted"></td>
    </tr>
    <tr>
        <td>inverted color alpha</td>
        <td>
            <input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: invertedAlpha, valueUpdate: 'input'">
            <input type="text" size="3" data-bind="value: invertedAlpha">
        </td>
    </tr>
    </tbody></table>
</div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain()
    });

    var scene = viewer.scene;
    var camera = scene.camera;

    var center = new Cesium.Cartesian3(1216389.3637977627, -4736323.641980423, 4081321.7428341154);
    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
    var hprRotation = Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(2.619728786416368, 0.0, 0.0));
    var hpr = Cesium.Matrix4.fromRotationTranslation(hprRotation, new Cesium.Cartesian3(0.0, 0.0, -2.0));
    Cesium.Matrix4.multiply(modelMatrix, hpr, modelMatrix);

    var buildingHighlight = scene.primitives.add(new Cesium.ClassificationPrimitive({
        geometryInstances : new Cesium.GeometryInstance({
            geometry : Cesium.BoxGeometry.fromDimensions({
                vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
                dimensions : new Cesium.Cartesian3(8.0, 5.0, 8.0)
            }),
            modelMatrix : modelMatrix,
            attributes : {
                color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5)),
                show : new Cesium.ShowGeometryInstanceAttribute(true)
            },
            id : 'volume'
        }),
        classificationType : Cesium.ClassificationType.CESIUM_3D_TILE
    }));

    center = new Cesium.Cartesian3(1216409.0189737265, -4736252.144235287, 4081393.6027081604);
    modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
    hprRotation = Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(5.785339046755887, 0.0, 0.0));
    hpr = Cesium.Matrix4.fromRotationTranslation(hprRotation, new Cesium.Cartesian3(0.4, 0.0, -2.0));
    Cesium.Matrix4.multiply(modelMatrix, hpr, modelMatrix);

    var treeHighlight1 = scene.primitives.add(new Cesium.ClassificationPrimitive({
        geometryInstances : new Cesium.GeometryInstance({
            geometry : new Cesium.EllipsoidGeometry({
                radii : new Cesium.Cartesian3(3.25, 5.0, 4.0)
            }),
            modelMatrix : modelMatrix,
            attributes : {
                color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#F26419').withAlpha(0.5)),
                show : new Cesium.ShowGeometryInstanceAttribute(true)
            },
            id : 'volume 1'
        }),
        classificationType : Cesium.ClassificationType.CESIUM_3D_TILE
    }));

    center = new Cesium.Cartesian3(1216404.8844045496, -4736255.287065536, 4081392.010192471);
    modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
    hprRotation = Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(5.785339046755887, 0.0, 0.0));
    hpr = Cesium.Matrix4.fromRotationTranslation(hprRotation, new Cesium.Cartesian3(-0.25, 0.0, -2.0));
    Cesium.Matrix4.multiply(modelMatrix, hpr, modelMatrix);

    var treeHighlight2 = scene.primitives.add(new Cesium.ClassificationPrimitive({
        geometryInstances : new Cesium.GeometryInstance({
            geometry : new Cesium.EllipsoidGeometry({
                radii : new Cesium.Cartesian3(3.25, 5.0, 4.0)
            }),
            modelMatrix : modelMatrix,
            attributes : {
                color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#F03A47').withAlpha(0.5)),
                show : new Cesium.ShowGeometryInstanceAttribute(true)
            },
            id : 'volume 2'
        }),
        classificationType : Cesium.ClassificationType.CESIUM_3D_TILE
    }));

    center = new Cesium.Cartesian3(1216398.813990024, -4736258.039875737, 4081387.9562678365);
    modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
    var translation = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(0.0, 0.0, -2.0));
    Cesium.Matrix4.multiply(modelMatrix, translation, modelMatrix);

    var treeHighlight3 = scene.primitives.add(new Cesium.ClassificationPrimitive({
        geometryInstances : new Cesium.GeometryInstance({
            geometry : new Cesium.EllipsoidGeometry({
                radii : new Cesium.Cartesian3(2.45, 2.45, 3.0)
            }),
            modelMatrix : modelMatrix,
            attributes : {
                color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#004FFF').withAlpha(0.5)),
                show : new Cesium.ShowGeometryInstanceAttribute(true)
            },
            id : 'volume 3'
        }),
        classificationType : Cesium.ClassificationType.CESIUM_3D_TILE
    }));

    center = new Cesium.Cartesian3(1216393.6257790313, -4736259.809075361, 4081384.4858198245);
    modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
    translation = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(0.0, 0.0, -1.0));
    Cesium.Matrix4.multiply(modelMatrix, translation, modelMatrix);

    var treeHighlight4 = scene.primitives.add(new Cesium.ClassificationPrimitive({
        geometryInstances : new Cesium.GeometryInstance({
            geometry : new Cesium.SphereGeometry({
                radius : 2.0
            }),
            modelMatrix : modelMatrix,
            attributes : {
                color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#55DDE0').withAlpha(0.5)),
                show : new Cesium.ShowGeometryInstanceAttribute(true)
            },
            id : 'volume 4'
        }),
        classificationType : Cesium.ClassificationType.CESIUM_3D_TILE
    }));

    function highlightBuilding() {
        camera.setView({
            destination : new Cesium.Cartesian3(1216394.1392207467, -4736348.59346919, 4081293.9160685353),
            orientation : {
                heading : 0.018509338875732695,
                pitch : -0.09272999615872646
            }
        });
    }

    function highlightTrees() {
        camera.setView({
            destination : new Cesium.Cartesian3(1216435.0352745096, -4736283.144192113, 4081368.0920420634),
            orientation : {
                heading : 5.718380792746039,
                pitch : -0.3087010195266797
            }
        });
    }

    function invertClassification(checked) {
        if (!scene.invertClassificationSupported) {
            console.log('This browser does not support invert classification');
        }

        scene.invertClassification = checked;
        scene.invertClassificationColor = new Cesium.Color(0.25, 0.25, 0.25, 1.0);

        buildingHighlight.getGeometryInstanceAttributes('volume').show = Cesium.ShowGeometryInstanceAttribute.toValue(!checked);
        treeHighlight1.getGeometryInstanceAttributes('volume 1').show = Cesium.ShowGeometryInstanceAttribute.toValue(!checked);
        treeHighlight2.getGeometryInstanceAttributes('volume 2').show = Cesium.ShowGeometryInstanceAttribute.toValue(!checked);
        treeHighlight3.getGeometryInstanceAttributes('volume 3').show = Cesium.ShowGeometryInstanceAttribute.toValue(!checked);
        treeHighlight4.getGeometryInstanceAttributes('volume 4').show = Cesium.ShowGeometryInstanceAttribute.toValue(!checked);
    }

    function updateAlpha(value) {
        scene.invertClassificationColor.alpha = parseFloat(value);
    }

    var tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(6074) });
    scene.primitives.add(tileset);

    var viewModel = {
        inverted: viewer.scene.invertClassification,
        invertedAlpha: viewer.scene.invertClassificationColor.alpha,
        highlightBuilding: highlightBuilding,
        highlightTrees: highlightTrees
    };
    Cesium.knockout.track(viewModel);
    var toolbar = document.getElementById('toolbar');
    Cesium.knockout.applyBindings(viewModel, toolbar);
    Cesium.knockout.getObservable(viewModel, 'inverted').subscribe(invertClassification);
    Cesium.knockout.getObservable(viewModel, 'invertedAlpha').subscribe(updateAlpha);

    highlightTrees();

    var currentObjectId;
    var currentPrimitive;
    var currentColor;
    var currentShow;
    var attributes;

    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function(movement) {
        var pickedObject = scene.pick(movement.endPosition);
        if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
            if (pickedObject.id === currentObjectId) {
                return;
            }

            if (Cesium.defined(currentObjectId)) {
                attributes = currentPrimitive.getGeometryInstanceAttributes(currentObjectId);
                attributes.color = currentColor;
                attributes.show = currentShow;
                currentObjectId = undefined;
                currentPrimitive = undefined;
                currentColor = undefined;
                currentShow = undefined;
            }
        }

        if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.primitive) && Cesium.defined(pickedObject.id) && Cesium.defined(pickedObject.primitive.getGeometryInstanceAttributes)) {
            currentObjectId = pickedObject.id;
            currentPrimitive = pickedObject.primitive;
            attributes = currentPrimitive.getGeometryInstanceAttributes(currentObjectId);
            currentColor = attributes.color;
            currentShow = attributes.show;
            if (!scene.invertClassification) {
                attributes.color = [255, 0, 255, 128];
            }
            attributes.show = [1];
        } else if (Cesium.defined(currentObjectId)) {
            attributes = currentPrimitive.getGeometryInstanceAttributes(currentObjectId);
            attributes.color = currentColor;
            attributes.show = currentShow;
            currentObjectId = undefined;
            currentPrimitive = undefined;
            currentColor = undefined;
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

</script>
</body>
</html>